<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改档案')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 研究项目
				</div>
				<div class="box-tools pull-right">
				</div>
			</div>
			<div class="ui-layout-content">
					<button class="btn-white" th:text="${btn.topicItemName}" th:each="btn:${detailList}" th:if="${btn.detailStatus}=='0'" th:onclick="'javascript:toMain('+${btn.detailId}+')' "></button>
					<button class="btn-primary" th:text="${btn.topicItemName}" th:each="btn:${detailList}" th:if="${btn.detailStatus}=='1'" th:onclick="'javascript:toMain('+${btn.detailId}+')' "></button>
			</div>
		</div>
	</div>
	
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="col-sm-12 select-table table-striped">
				<div class="col-sm-12">
						<blockquote class="text-warning" style="font-size:16px">
							[[${questionnaire.questionnaireName}]]
						</blockquote>
				</div>
				<form class="form-horizontal" id="studyForm">
					<input type="hidden" name="detailId" th:value="${detail.detailId}">
					<input type="hidden" id="recordId" name="recordId" th:value="${detail.recordId}">
					<div th:each="question:${questionnaire.questions}">
						<div class="row">
							<div class="col-sm-12" >
								<h4 class="form-header h4">[[${question.no}]]. [[${question.title}]] </h4>
							</div>
						</div>
						<div class="answer_div" th:if="${question.isGroup}==false">
							<div class="row" th:each="a:${question.answer}">
								<div class="radio">
									<label th:utext="${a.answerInput}"</label>
								</div>
							</div>
						</div>
						<div class="answer_div" th:if="${question.isGroup}==true" th:each="g:${question.group}">
							<div class="row">
								<div th:class="${g.width}" >
									<div class="form-group">
										<label th:text="${g.label}"></label>
									</div>
								</div>
								<div th:class="${a.width}" th:each="a:${g.answer}">
									<div class="form-group">
		      							<label th:text="${a.label}" th:if="${g.no}==0"></label>
		      							<div th:utext="${a.answerInput}"></div>
	      							</div>
	     						</div>
							</div>
						</div>
					</div>
				</form>
				<div class="row">
			        <div class="col-sm-offset-4 col-sm-8">
			            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()" th:if="${detail.detailStatus}=='0'"><i class="fa fa-check"></i>保 存</button>&nbsp;
			            <button type="button" class="btn btn-sm btn-success"  onclick="returnStudy()"><i class="fa fa-reply-all"></i>返回</button>&nbsp;
			            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
			        </div>
			    </div>
			</div>
		</div>
	</div>
    
    
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "kt/record";
        
        
        $(function() {
		    var panehHidden = false;
		    if ($(this).width() < 769) {
		        panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: 185 });
	     	// 回到顶部绑定
	    	if ($.fn.toTop !== undefined) {
	    		var opt = {
	    			win:$('.ui-layout-center'),
	    			doc:$('.ui-layout-center')
	    		};
	    		$('#scroll-up').toTop(opt);
	    	}
	     	
		});
        
        $("#form-record-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                //$.operate.save(prefix + "/saveDetail", $('#form-record-edit').serialize());
                submitForm();
            }
        }

        $(".dateInput").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        
        function submitForm(){
	    	$.ajax({
	            url: prefix + "/saveDetail",
	            data: $('#studyForm').serialize(),
	            type: "post",
	            success: function(result) {
	            	if (result.code == 0) {
	            		layer.msg("保存成功,正在刷新数据请稍后……", {
		            	    icon: 1,
		            	    time: 500,
		            	    shade: [0.1, '#8F8F8F']
		            	},function() {
		            		location.reload();
		            	});
	            	} else {
	            		alert(result.msg);
	            	}
	            }
	        })
	    }
        
        function toMain(detailId){
        	$.modal.loading("正在更换项目，请稍后...");
           	$("#studyForm").attr('action',prefix+"/studyMain/"+detailId).submit();
        }
        
        function returnStudy(recordId){
        	$.modal.loading("正在跳转流程图，请稍后...");
        	$("#studyForm").attr('action',prefix+"/study/"+$("#recordId").val()).submit();
        }
    </script>
</body>
</html>